import React from 'react'
import { Tabs, Badge } from 'antd-mobile'
import './Tablist.less'
import { withRouter, Link } from 'react-router-dom'

function Tablist(props) {
  let { arr } = props
  return (
    <div className='tabs'>
      <Tabs>
        <Tabs.Tab title={
          <Badge content='' style={{ '--right': '-10px', '--top': '8px' }}>{arr[0]}
          </Badge>
        } key='1'>
        </Tabs.Tab>
        <Tabs.Tab title={
          <Badge content='' style={{ '--right': '-10px', '--top': '8px' }}>{arr[1]}
          </Badge>
        } key='2'>
        </Tabs.Tab>
        <Tabs.Tab title={
          <Badge content='' style={{ '--right': '-10px', '--top': '8px' }}>{arr[2]}
          </Badge>
        } key='3'>
        </Tabs.Tab>
        <Tabs.Tab
          title={
            <Badge content='' style={{ '--right': '-10px', '--top': '8px' }}>{arr[3] == '优惠券' ? <Link to="/coupon">{arr[3]}</Link> : arr[3]}
            </Badge>
          }
          key='4'
        >
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default withRouter(Tablist);

